<!--新增功能，上半部分表单-->
<template>
  <dir class="pictureUpload-box">
    <div v-if="type == '1'">
      <div v-if="imagesurlarr.length > 0" class="imglistbox">
        <el-image
          v-for="(item, i) in imagesurlarr"
          :key="i"
          :src="item"
          style="width: 100px; height: 100px;"
          fit="cover"
          @click="deleteimg(item)"
        />
      </div>
      <el-upload
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeUpload"
        :http-request="toRequest"
        class="dialog-upload"
        action="string"
        accept="image/*"
        fit="scale-down"
      >
        <div class="tip-box">
          <div class="tip-uplader">
            <i class="el-icon-plus avatar-uploader-icon" />
          </div>
          <p class="tip-font">（支持jpg/png格式，4M以内）</p>
        </div>
      </el-upload>
    </div>
    <div v-else>
      <el-upload
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeUpload"
        :http-request="toRequest"
        class="dialog-upload"
        action="string"
        accept="image/*"
        fit="scale-down"
      >
        <el-image
          v-if="imagesurlstr"
          :src="imagesurlstr"
          style="width: 100px; height: 100px;"
          fit="cover"
        />
        <div v-else class="tip-box">
          <div class="tip-uplader">
            <i class="el-icon-plus avatar-uploader-icon" />
          </div>
          <p class="tip-font">（支持jpg/png格式，4M以内）</p>
        </div>
      </el-upload>
    </div>
  </dir>
</template>

<script>
import {fileUpload} from '@const/api.js'
import {fitType} from '@const/common.js'
import {without} from 'lodash'
import {setImmediate} from 'timers'
// 文件上传限制 ------- 图片类型
const imageLimit = 'image/'
export default {
  name: 'PictureUpload',
  props: {
    // 接收默认url
    imgsrc: {
      type: String,
      default: () => ''
    },
    // 接收多张
    imgsrcarr: {
      type: Array,
      default: () => []
    },
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // 类型
    uptype: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      // 类型
      type: this.uptype || '',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      // 图片填充行为
      fitType,
      // 上传的地址
      uploadUrl: fileUpload,
      // 多张上传的图片地址
      imagesurlarr: this.imgsrcarr || [],
      // 单张
      imagesurlstr: this.imgsrc || ''
    }
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler(val) {
        this.imagesurlstr = val
      }
    }
  },

  methods: {
    // 上传图片成功 本地图片地址
    handleAvatarSuccess(res, file) {
      this.localImgurl = URL.createObjectURL(file.raw)
    },

    // 点击上传
    beforeUpload(file) {
      this.uploadActon(file)
    },

    // 删除图片
    deleteimg(url) {
      let imgarr = without(this.imagesurlarr, url)
      this.imagesurlarr = imgarr
      this.$message({type: 'success', message: '图片移除成功'})
      this.$emit('ReturnImgUrl', this.imagesurl)
    },
    toRequest(dataA) {
      // 发起请求
      let fd = new FormData()
      fd.append('file', dataA.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: {'Content-Type': 'multipart/form-data'},
        data: fd
      }).then(res => {
        this.$message({type: 'success', message: '上传成功'})
        // 赋值上传后的地址给文档
        if (this.type === '1') {
          this.imagesurlarr.push(res.data.payload)
          this.$emit('ReturnImgUrl', this.imagesurl, this.key)
        } else {
          this.imagesurlstr = res.data.payload
          this.$emit('ReturnImgUrl', this.imagesurlstr, this.key)
        }
      })
    },
    // 图片上传限制
    uploadActon(file) {
      // 图片拦截
      const isJPG = file.type.includes(imageLimit)
      if (!isJPG) {
        this.$message.error('上传证照图片只能是图片格式!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 4
      if (!isLt2M) {
        this.$message.error('上传证照图片大小不能超过 4MB!')
        return false
      }

      return true
    }
  }
}
</script>

<style lang="less">
.pictureUpload-box {
  padding: 0;

  .imglistbox {
    display: inline-block;
    float: left;

    .el-image {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .dialog-upload {
    width: 211px;
    float: left;
    height: 100px;
    display: inline-block;
    align-items: center;
    justify-content: center;

    .el-image {
      width: 211px;
      height: 100px;
    }

    .tip-box {
      display: flex;
      flex-direction: column;
      align-items: center;

      .tip-uplader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .el-input {
    width: 211px;
  }
}
</style>
